<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
</head>
<style type="text/css">
body {
	padding: 0px;
	margin: 0px;
}
.banner {
	width: 612px;
	height: 160px;
	position: relative;
	overflow: hidden;
	float: left;
}
.index{
	float:left;
	width:200px;
	height:160px;
	position:relative;
	
}
.banner>div {
	position: absolute;
}
.index-item{
	border:5px solid #ccc;
	width:160px;
	height:40px;
	margin:0px 0px 5px 10px;
	

}
div.arrow-left {
            width: 0px;
            height: 0px;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
            border-right: 10px solid green;
            font-size: 0px;
            line-height: 0px;
			top:5px;
			left:-15px;
			position:absolute;
        }
.index-active{
	border:green 5px solid;
	width:160px;
	height:40px;
	margin:0px 0px 5px 10px;
	position: absolute;		
	top:0px;
	left:0px;
}
</style>
<body>
<div class="banner">
	<div class="slide">
		<img src="Cgp3O1b-YmiAfYXKAABaX_eLdn0756.JPG">
        <img src="CgqKkVb-WcGAAIDHAAE0PRlsSYQ847.JPG">
        <img src="Cgp3O1b-XGqAFen8AAFOsYgMdik836.JPG">
	</div>
</div>
<div class="index">
<div class="index-active"><div class="arrow-left"></div></div>
<div class="index-item"></div>
<div class="index-item"></div>
<div class="index-item"></div>

</div>
</body>
<script>
$(document).ready(function(e) {
	(function(){
	var h=$(".banner").height()+3;
	var length=$(".slide img").length;
	var i=1;
	var height;
	var rightH;
	
	function rightPartMove(){
		var h=55;
		i=i%length;
		rightH=i*h;
		$(".index-active").animate({top: rightH});	
	}
	function leftPartMove(){
			i=i%length;
			height=i*h;
			console.log(i);
			$(".slide").animate({top: -height});
			i++;
	}
	function clickIndex(){
		if($(".slide").is(":animated")){
			return ;
			}
		$(".index-item").click(function(){
			i=$(this).index()-1;
			
			});
	}
	var animate=function(){
				rightPartMove();
				leftPartMove();			
	}
	function init(){	
		setInterval(animate,2000);
		clickIndex();
	}
	init();
})();
	

 
	

	});
	
    </script>
</html>